<!--
 * @Author: 许警 11378748333@
 * @Date: 2024-03-21 13:44:31
 * @LastEditors: 许警 11378748333@
 * @LastEditTime: 2025-03-27 15:32:51
 * @FilePath: /hsxlsystem/src/views/business/huifang/user_evaluate/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="search">
    <a-form style="padding-top: 20px" :model="formModel" :hideRequiredMark="true" :label-col="labelCol">
      <a-row :gutter="20">
        <a-col :span="6" :lg="5" :md="7" :xs="20">
          <a-form-item name="evaluatePerson" label="派单人员">
            <a-input v-model:value="formModel.evaluatePerson" placeholder="请输入派单人员姓名"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6" :lg="5" :md="7" :xs="20">
          <a-form-item name="nurse" label="服务护士">
            <a-input v-model:value="formModel.nurse" placeholder="请输入服务护士姓名/ID"></a-input>
          </a-form-item>
        </a-col>

        <a-col :span="6" :lg="6" :xs="11" :md="8">
          <a-form-item label="评价时间">
            <a-range-picker v-model:value="time" style="width: 100%" show-time format="YYYY-MM-DD HH:mm:ss" @change="panelChange" />
          </a-form-item>
        </a-col>
        <a-col :span="2" :offset="1"><a-button type="primary" @click="buttonSearch" class="d-a-center">搜索</a-button></a-col>
      </a-row>
    </a-form>

    <a-table :columns="columns" :data-source="renderData" bordered :loading="loading" :pagination="pagination" @change="handleTableChange">
      <!-- :scroll="{ y: 540 ,x:'auto'}" -->

      <template #dispatchIsSatisfaction="{ record }">
        <a-tag :color="statusColor[record.dispatchIsSatisfaction]">{{ statusText[record.dispatchIsSatisfaction] }}</a-tag>
      </template>

      <template #nurseIsSatisfaction="{ record }">
        <a-tag :color="statusColor[record.nurseIsSatisfaction]">{{ statusText[record.nurseIsSatisfaction] }}</a-tag>
      </template>

      <template #operation="{ record }">
        <a-button type="link" @click="look(record.number)">查看</a-button>
      </template>
    </a-table>

    <!-- 查看详情 -->
    <detail-modal v-model:visible="visible" :number="number" />
  </div>
</template>

<script>
import { reactive, toRefs, computed, ref } from 'vue'
import { columnsArr, satisfiedArr, statusColorObj, statusTextObj, dataObj } from './data'
import detailModal from './components/detailModal.vue'
import { selectEvaluateList } from '@/api/buisness/index'
import { useTable } from '@/hooks'
export default {
  components: {
    detailModal
  },
  setup() {
    // const { pagination, setCurrentPage, setPageSize, setTotal } = usePagination()

    const data = reactive(dataObj)

    const statusColor = statusColorObj

    const statusText = statusTextObj

    const columns = columnsArr

    const satisfiedOpt = satisfiedArr

    //必须有括号 建议箭头函数 防止深拷贝
    const getParams = () => ({})

    const { renderData, formModel, loading, pagination, handleSearch, handleTableChange, buttonSearch } = useTable({
      api: selectEvaluateList,
      getParams
    })

    handleSearch(1)

    const panelChange = (date, dateString) => {
      console.log(formModel)
      formModel.value.startTime = dateString[0]
      formModel.value.endTime = dateString[1]
    }

    const look = number => {
      data.number = number
      data.visible = true
    }

    return {
      ...toRefs(data),
      panelChange,
      look,
      statusText,
      columns,
      satisfiedOpt,
      statusColor,
      renderData,
      formModel,
      loading,
      pagination,
      handleSearch,
      handleTableChange,
      buttonSearch
    }
  }
}
</script>

<style></style>
